<template>
	<view class="container">
		<!--搜索框-->
		<u-sticky>
			<view class="header">
				<u-search placeholder="" v-model="passwordName" height="35" :showAction="false" @change="search"/>
				<button @click="add">添加</button>
			</view>
		</u-sticky>

		<!--没有密码显示-->
		<view class="no-content" v-if="passwordList.length === 0">
			<image src="@/static/icon/no-content.png"/>
			<view>没有密码</view>
		</view>

		<!--密码列表-->
		<scroll-view>
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(password, i) in passwordList"
									   :key="i"
									   :right-options="options"
									   @click="menuClick($event, i)"
									   :name="i"
									   :index="i">
					<view class="password-view" @click="show(i)">
						<image src="@/static/icon/lock.png" class="password-image"/>
						<view class="password-name">{{password.passwordName}}</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</scroll-view>

		<!--消息提示-->
		<u-notify ref="notify"></u-notify>

		<!--删除提示-->
		<u-modal :show="showDel"
				 content="是否确定删除"
				 showCancelButton
				 buttonReverse
				 @cancel="showDel = false"
				 @confirm="del"
		/>

		<!--展示密码-->
		<com-detail :showDetail="showDetail" @close="showDetail = false" :password="detailPassword"/>

		<!-- 添加或修改密码 -->
		<com-add-or-update ref="addOrUpdate" @finish="getList"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 密码列表
				passwordList: [],
				//搜索内容
				passwordName: null,
				// 页码
				pageNum: 1,
				// 条数
				pageSize: 100,
				// 总条数
				total: 0,

				// 删除提示
				showDel: false,
				// 要删除的索引
				delIndex: 0,

				// 是否显示详情
				showDetail: false,
				// 详情的密码
				detailPassword: {},

				// 左滑菜单
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#409EFF'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#F79646'
					}
				}]
			}
		},
		created() {
			uni.$on('success', message => this.$refs.notify.success(message));
		},
		onShow() {
			this.search();
		},
		methods: {
			/**
			 * 滑动菜单点击事件
			 *
			 * @param event 事件
			 * @param index 第几个滑动
			 */
			menuClick(event, index) {
				// 获取操作类型
				let type = event.index;
				// 获取点击的密码
				let password = this.passwordList[index];

				switch (type) {
					// 编辑点击事件
					case 0:
						// 获取要修改的密码内容
						this.$refs.addOrUpdate.init(password);
						break;
					// 删除点击事件
					case 1:
						this.delIndex = index;
						this.showDel = true;
						break;
					default:
				}
			},

			/**
			 * 获取列表
			 */
			getList() {
				let {list, total} = this.passwordService.getList(this.pageNum, this.pageSize, this.passwordName);
				this.passwordList = list;
				this.total = total;
			},

			/**
			 * 追加列表
			 */
			addList() {
				let {list, total} = this.passwordService.getList(this.pageNum, this.pageSize, this.passwordName);
				this.passwordList.push(...list);
				this.total = total;
			},

			/**
			 * 搜索
			 */
			search() {
				this.pageNum = 1;
				this.getList();
			},

			/*
			 * 添加
			 */
			add() {
				this.$refs.addOrUpdate.init({
					account: null,
					password: null,
					remark: null
				});
			},

			/**
			 * 删除
			 */
			del() {
				this.passwordService.del(this.passwordList[this.delIndex].passwordId);
				this.search();
				this.showDel = false;
				this.$refs.notify.success('删除成功');
			},

			/**
			 * 显示密码
			 *
			 * @param i 索引
			 */
			show(i) {
				let password = this.passwordList[i];
				this.showDetail = true;
				this.detailPassword = password;
			}
		},

		/**
		 * 触底事件
		 */
		onReachBottom() {
			// 获取总页数
			let totalPage = Math.ceil(this.total / this.pageSize);
			if (this.pageNum < totalPage) {
				this.pageNum++;
				this.addList();
			}
		}
	}
</script>

<style scoped>
.header {
	display: flex;
	align-items: center;
}
.header button {
	width: 60px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	margin-left: 10px;
	background-color: #a4dbff;
	color: white;
	border-width: 0;
	border-radius: 5px;
}

.container {
	padding: 10px;
}
.password-view {
	display: flex;
	align-items: center;
	margin: 10px 5px;
	padding: 10px 5px;
	box-shadow: 2px 2px 2px 2px #eeeeee;
	border-radius: 5px;
	/*box-sizing: border-box;*/
}
.password-image {
	width: 25px;
	height: 25px;
	margin-right: 10px;
}

/*没有内容*/
.no-content {
	text-align: center;
}
.no-content image {
	width: 200px;
	height: 200px;
	margin-top: 100px;
}
.no-content view {
	color: #aaaaaa;
}
</style>
